How to create a password-protected Web page by using FrontPage 2003, Active Server Pages, and an Access database

SUMMARY

This step-by-step article describes how to create a simple password-protected Web page solution by using FrontPage 2003, Active Server Pages (ASP), and a Microsoft Access database.

Important

• The sample code in this article is not designed as a replacement for the FrontPage 2003 built-in security functionality. The samples are designed to provide a simple security mechanism only for users who are browsing to your Web site. As such, FrontPage 2003 security does not integrate with the user names and the passwords that are added to the Microsoft Access database.
• The user names and passwords that are typed in are transmitted across the Internet in plain text. To help increase security, Microsoft recommends that you use a Web server that can use Secure Sockets Layer (SSL) encryption. For more information, contact your Web site administrator or your Internet Service Provider (ISP).

back to the top

Use the ASP Features in FrontPage 2003

Before you can use the ASP features in FrontPage 2003, you must have access to a Web server or a disk-based Web that supports ASP.

back to the top

Create a New Web Site in FrontPage 2003

Note The example information assumes that you name your Web site logon, and that you create it as a subweb off the root of your Web site. If you use a name other than logon, or create the Web site in an alternative location, you must modify the steps throughout this article accordingly.

To create a new Web site in FrontPage 2003, follow these steps:

1. Start FrontPage 2003.
2. On the File menu, click New.
3. In the task pane, click More Web site templates, and then click Empty Web Site.
4. Under Options, type the location where you want to store the new Web site in the following format:

   http://servername/logon

   Where servername is the name of your ASP-enabled Web server.
5. Click OK.

The new empty Web site that is named logon is opened in FrontPage 2003.back to the top

Create a Database

Create a database to store user names and passwords by using a database program such as Microsoft Office Access 2003.

Note If you use a program other than Access 2003 to create the database, modify these steps accordingly.

To create a database, follow these steps:

1. Start Access 2003.
2. On the File menu, click New.
3. In the task pane, click Blank database.
4. Type logon.mdb for the file name, and then click Create.
5. In the Objects pane, click Tables, and then click New.
6. Click Design View, and then click OK.
7. In the first row of the Field Name column, type UID.
8. In the corresponding Data Type column, click Text, and then click the Primary Key button on the toolbar (appears as a key symbol).
9. In the second row of the Field Name column, type PWD, and then click Text in the second row in the Data Type column.
10. On the File menu, click Save.
11. In the Table Name box, type tblUsers, and then click OK.
12. On the View menu, click Datasheet View.
13. In the UID column, type testuser.
    
    In the PWD column, type password.
14. On the File menu, click Close, and then quit Access 2003.

back to the top

Import the Database

Import the user name and the password database that you created into FrontPage 2003. To do so, follow these steps:

1. In FrontPage 2003 with your logon Web site open, click Import on the File menu.
2. Click Add File, locate and then click the logon.mdb file that you created.
   
   Click Open.
3. Click Modify, type _private/logon.mdb in the File location within your web box, and then click OK.
   
   Note There is an underscore character (_) in front of "private" in the path of the file.
4. Click OK to import the database file.
5. If you are prompted to create a database connection for this imported file, click No.

back to the top

Create the ASP Pages

You must create several files to work with this sample. First, create a home page for your Web site, a "nonsecure" page and a password-protected page for testing, and then the logon Web page and the logon include file.

Create the Home Page

This page serves as the default page for your site and includes links to the nonsecure page and the password-protected Web page that you create. To create a home page, follow these steps:

1. In FrontPage 2003, click the Create a new normal page button.
2. At the footer area of the document window, click Code to show code view.
3. Select and then remove all the HTML code in the Web page.
4. Type or paste the following HTML code in the Web page.

   <% @language="vbscript" %>
   <html>
   <head><title>Home Page</title></head>
   <body>
   <h3>Home Page</h3>
   <p>You are logged on as: 
   <%
     If Len(Session("UID")) = 0 Then
       Response.Write "<b>You are not logged on.</b>"
     Else
       Response.Write "<b>" & Session("UID") & "</b>"
     End If
   %>
   </p>
   <ul>
   <li><a href="passwordprotect.asp">Password-Protected Page</li>
   <li><a href="nonsecure.asp">Nonsecure Page</li>
   </ul>
   </body>
   </html>
   

5. Right-click the new_page_1.htm tab, and then click Save.
   
   Save the page as default.asp in the root folder of your Web site.
6. On the File menu, click Close to close the default.asp Web page.

back to the top

Create the Nonsecure Page

Create a typical ASP page that everyone can view. To create a nonsecure page, follow these steps:

1. In FrontPage 2003, click the Create a new normal page button.
2. At the footer area of the document window, click Code to show code view.
3. Select and then remove all the HTML code in the Web page.
4. Type or paste the following HTML code in the Web page.

   <% @language="vbscript" %>
   <html>
   <head><title>Nonsecure Page</title></head>
   <body>
   <h3>Nonsecure Page</h3>
   <p>You are logged on as: 
   <%
     If Len(Session("UID")) = 0 Then
       Response.Write "<b>You are not logged on.</b>"
     Else
       Response.Write "<b>" & Session("UID") & "</b>"
     End If
   %>
   </p>
   <p><a href="default.asp">Back to default</a>
   </body>
   </html>
   

5. Right-click the new_page_1.htm tab, and then click Save.
   
   Save the page as nonsecure.asp in the root folder of your Web site.
6. On the File menu, click Close to close the nonsecure.asp Web page.

back to the top

Create the Password-Protected Page

The page in this step is the same as the nonsecure Web page that you created previously, except that you must add the following line of code near the top of the page:

<!--#include virtual="/logon/_private/logon.inc"-->

When you add this line of code to an ASP Web page, that page becomes password-protected by the logon.inc file that you create. To create a password-protected Web page, follow these steps:

1. In FrontPage 2003, click the Create a new normal page button.
2. At the footer area of the document window, click Code to show code view.
3. Select and then remove all the HTML code in the Web page.
4. Type or paste the following HTML code in the Web page.

   <% @language="vbscript" %>
   <!--#include virtual="/logon/_private/logon.inc"-->
   <html>
   <head><title>Password-Protected Page</title></head>
   <body>
   <h3>Password-Protected Page</h3>
   <p>You are logged on as: 
   <%
     If Len(Session("UID")) = 0 Then
       Response.Write "<b>You are not logged on.</b>"
     Else
       Response.Write "<b>" & Session("UID") & "</b>"
     End If
   %>
   </p>
   <p><a href="default.asp">Back to default</a>
   </body>
   </html>
   

5. Right-click the new_page_1.htm tab, and then click Save.
   
   Save the page as passwordprotect.asp in the root folder of your Web site.
6. On the File menu, click Close to close the passwordprotect.asp Web page.

back to the top

Create the Logon Page

Create a logon page that looks similar to a typical Windows logon dialog box. Users who try to access the password-protected Web page are sent to this page to type their user name and password. To create a logon page, follow these steps:

1. In FrontPage 2003, click the Create a new normal page button.
2. At the footer area of the document window, click Code to show code view.
3. Select and then remove all the HTML code in the Web page.
4. Type or paste the following HTML code in the Web page.

   <% @language="vbscript" %>
   <!--#include virtual="/logon/_private/logon.inc"-->
   <%
     ' Was this page posted to?
     If UCase(Request.ServerVariables("HTTP_METHOD")) = "POST" Then
       ' If so, check the username/password that was entered.
       If ComparePassword(Request("UID"),Request("PWD")) Then
         ' If comparison was good, store the user name...
         Session("UID") = Request("UID")
         ' ...and redirect back to the original page.
         Response.Redirect Session("REFERRER")
       End If
     End If
   %>
   <html>
   <head><title>Logon Page</title>
   <style>
   body  { font-family: arial, helvetica }
   table { background-color: #cccccc; font-size: 9pt; padding: 3px }
   td    { color: #000000; background-color: #cccccc; border-width: 0px }
   th    { color: #ffffff; background-color: #0000cc; border-width: 0px }
   </style>
   </head>
   <body bgcolor="#000000" text="#ffffff">
   <h3 align="center">&#xa0;</h3>
   <div align="center"><center>
   <form action="<%=LOGON_PAGE%>" method="POST">
   <table border="2" cellpadding="2" cellspacing="2">
     <tr>
       <th colspan="4" align="left">Enter User Name and Password</th>
     </tr>
     <tr>
       <td>&#xa0;</td>
       <td colspan="2" align="left">Please type your user name and password.</td>
       <td>&#xa0;</td>
     </tr>
     <tr>
       <td>&#xa0;</td>
       <td align="left">Site</td>
       <td align="left"><%=Request.ServerVariables("SERVER_NAME")%> &#xa0;</td>
       <td>&#xa0;</td>
     </tr>
     <tr>
       <td>&#xa0;</td>
       <td align="left">User Name</td>
       <td align="left"><input name="UID" type="text" size="20"></td>
       <td>&#xa0;</td>
     </tr>
     <tr>
       <td>&#xa0;</td>
       <td align="left">Password</td>
       <td align="left"><input name="PWD" type="password" size="20"></td>
       <td>&#xa0;</td>
     </tr>
     <tr>
       <td>&#xa0;</td>
       <td colspan="2" align="center"><input type="submit" value="LOGON"></td>
       <td>&#xa0;</td>
     </tr>
   </table>
   </form>
   </center></div>
   </body>
   </html>
   

5. Right-click the new_page_1.htm tab, and then click Save.
   
   Save the page as logon.asp in the root folder of your Web site.
6. On the File menu, click Close to close the logon.asp Web page.

back to the top

Create the Logon Include File

The include file provides the user name and password functionality and is used by both the password-protected Web page and the logon Web page. To create the logon include file, follow these steps:

1. In FrontPage 2003, click the Create a new normal page button.
2. At the footer area of the document window, click Code to show code view.
3. Select and then remove all the HTML code in the Web page.
4. Type or paste the following HTML code in the Web page.

   <%
     ' Do not cache this page.
     Response.CacheControl = "no-cache"
   
     ' Define the name of the users table.
     Const USERS_TABLE  = "tblUsers"
     ' Define the path to the logon page.
     Const LOGON_PAGE   = "/logon/logon.asp"
     ' Define the path to the logon database.
     Const MDB_URL      = "/logon/_private/logon.mdb"
   
     ' Check to see whether you have a current user name.
     If Len(Session("UID")) = 0 Then
       ' Are you currently on the logon page?
       If LCase(LOGON_PAGE) <> LCase(Request.ServerVariables("URL")) Then
         ' If not, set a session variable for the page that made the request...
         Session("REFERRER") = Request.ServerVariables("URL")
         ' ...and redirect to the logon page.
         Response.Redirect LOGON_PAGE
       End If
     End If
   
     ' This function checks for a username/password combination.
     Function ComparePassword(UID,PWD)
       ' Define your variables.
       Dim strSQL, objCN, objRS
       ' Set up your SQL string.
       strSQL = "SELECT * FROM " & USERS_TABLE & " WHERE (UID='" & UID & "' AND PWD='" & PWD & "');"
       ' Create a database connection object.
       Set objCN = Server.CreateObject("ADODB.Connection")
       ' Open the database connection object.
       objCN.Open "driver={Microsoft Access Driver (*.mdb)}; dbq=" & Server.MapPath(MDB_URL) & "; uid=admin; pwd="
       ' Run the database query.
       Set objRS = objCN.Execute(strSQL)
       ' Set the status to true/false for the database lookup.
       ComparePassword = Not(objRS.EOF)
       ' Close your database objects.
       Set objRS = Nothing
       Set objCN = Nothing
     End Function
   %>

5. Right-click the new_page_1.htm tab, and then click Save.
   
   Save the page as logon.inc in the _private folder of your Web site.
6. On the File menu, click Close to close the logon.inc file.

back to the top

Test the Logon Web Site

To do this, follow these steps:

1. In FrontPage 2003, in the Folder List pane, right-click Default.asp, and then click Preview in Browser.
   
   The Web browser loads the sample home page and shows that you are not logged on.
2. Click the Nonsecure page link.
   
   The page loads and shows that you are not logged on. Click the Back to default link to return to the default page.
3. Click the Password-Protected page link.
   
   The logon.asp page loads instead of the password-protected page.
4. In the User Name box, type testuser, type password in the Password box, and then click LOGON.
   
   The password-protected page appears and shows that you are logged on as testuser. Click the Back to default link to return to the default page. The home page loads and shows that you are logged on as testuser.
5. Click the Nonsecure page link.
   
   The page loads and shows that you are logged on as testuser.

back to the top

Customize the Logon Web Site

You can customize the logon example Web site in the following ways:

• Add user names and passwords: You can open the database. To do so, double-click the database in FrontPage 2003, and then add users to the tblUsers table.
• Password-protect other Web pages: To password-protect another Web page in your Web site, you must save the file with an ASP file name extension, for example, Mypage.asp, and then add the following two lines to the very top of the file:

  <% @language="vbscript" %>
  <!--#include virtual="/logon/_private/logon.inc"-->
  

  The first line specifies that you are using Microsoft Visual Basic Scripting Edition (VBScript) for your scripting language, and the second line includes the user name and the password functionality from the logon include file that you created earlier.

back to the top